import React, { Component } from 'react';
import { render } from 'react-dom';
require('../public/css/mycss.css');

export class  Login extends  React.Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            username:'',
            password:'',
            islogin:false,
        };
          this.login=this.login.bind(this);
          this.inputName=this.inputName.bind(this);
          this.inputPas=this.inputPas.bind(this);
      }
    inputName(e){
      let name=e.target.value;
        this.setState({username:name})
    }
    inputPas(e){
        let pas=e.target.value;
        this.setState({password:pas})
    }
    login(e){
        if(this.state.username===""||this.state.password===""){
            alert("请输入正确用户信息！")
        }else{
            $.post("/login",
                {     username:this.state.username,
                      password:this.state.password,
                }
            ).then((result) => {
                    if(result.status===200)
                    {
                        this.setState.islogin=true;
                        //let name=this.state.username;
                        let user=result.user;
                        //存储用户名和id
                        let path={
                            pathname:`/message/${user.username}/${user._id}`,
                            state:{user:user},
                        }
                        this.props.history.push(path); //--------------------登录后跳转路由 ，页面刷新后传递的state 值为undefind，不能用于保存数据
                    }else {
                        alert("登陆失败！密码或用户名错误！")
                    }
                    // console.log(result)
                },
                (error) => {
                    // console.log(error);
                }
            )
        }
        e.preventDefault();
    }
    render(){
        return <form className="loginform" >
                <div className="login-box" >
                    <span>姓名:</span>
                    <input className="login-input" onChange={this.inputName}/>
                </div>
                <div className="login-box" >
                <span>密码:</span><input className="login-input" onChange={this.inputPas}/>
                </div>
            <div className="input-btn">
                <button onClick={this.login}>登陆</button>
                <button >取消</button>
            </div>
                </form>
    }
}
